<template>
	<view>
		<view class="userinfo">
			<view class="userinfo_item" @tap="changeAvatarUrl">
				<text class="userinfo_item_left">头像</text>
				<image class="userinfo_item_image"
					:src="!userinfo.avatarUrl?'/static/my/header.png':userinfo.avatarUrl" mode=""></image>
			</view>
			<view class="userinfo_item">
				<text class="userinfo_item_left">昵称</text>
				<input class="userinfo_item_input" type="text" :disabled="!show" v-model="userinfo.nickName" />
			</view>
			<view class="userinfo_item">
				<text class="userinfo_item_left">姓名</text>
				<view class="right">
					<text class="userinfo_item_text">{{userinfo.realName}}</text>
				</view>
			</view>
			<view class="userinfo_item">
				<text class="userinfo_item_left">手机号</text>
				<view class="right">
					<text class="userinfo_item_text">{{userinfo.mobile}}</text>
				</view>
			</view>
			<view class="userinfo_item">
				<text class="userinfo_item_left">性别</text>
				<input class="userinfo_item_input" :disabled="!show" type="text" v-model="sex" />
			</view>
			<view class="userinfo_item" v-if="userinfo.userType==3">
				<text class="userinfo_item_left">淘宝店名</text>
				<view class="right">
					<input class="userinfo_item_input" :disabled="!show" type="text" v-model="userinfo.storeName" />
					<image class="img" src="/static/my/right.png" style="width: 12rpx; height: 20rpx;" mode="">
					</image>
				</view>
			</view>
			<view class="userinfo_item" @click="verify" v-if="userinfo.userType==3">
				<text class="userinfo_item_left">种植品种</text>
				<view class="right">
					<text class="userinfo_item_text">{{userinfo.varirty}}</text>
					<image class="img" src="/static/my/right.png" style="width: 12rpx; height: 20rpx;" mode="">
					</image>
				</view>
			</view>
			<view class="userinfo_item" @click="verify" v-if="userinfo.userType==1">
				<text class="userinfo_item_left">种植品种</text>
				<view class="right">
					<text class="userinfo_item_text">{{userinfo.varirty}}</text>
					<image class="img" src="/static/my/right.png" style="width: 12rpx; height: 20rpx;" mode="">
					</image>
				</view>
			</view>
			<view class="userinfo_item" @click="verify" v-if="userinfo.userType==2">
				<text class="userinfo_item_left">主营品种</text>
				<view class="right">
					<text class="userinfo_item_text">{{userinfo.varirty}}</text>
					<image class="img" src="/static/my/right.png" style="width: 12rpx; height: 20rpx;" mode="">
					</image>
				</view>
			</view>
			<view class="userinfo_item" @click="showMulLinkageThreePicker"
				v-if="userinfo.userType==1 || userinfo.userType==2 || userinfo.userType==3">
				<text class="userinfo_item_left">{{userinfo.userType==1?'种植地区':'经营地区'}}</text>
				<view class="right">
					<input class="userinfo_item_input" :disabled="true" type="text" v-model="userinfo.area" />
					<image class="img" src="/static/my/right.png" style="width: 12rpx; height: 20rpx;" mode="">
					</image>
				</view>
			</view>
			<view class="userinfo_item" v-if="userinfo.userType==1">
				<text class="userinfo_item_left">种植面积</text>
				<view class="right">
					<input class="userinfo_item_input" :disabled="!show" type="digit" v-model="userinfo.acreage" />
					<text class="userinfo_item_input">亩</text>
				</view>
			</view>
			<view class="userinfo_item userinfo_border" @tap="callPhone(userinfo.salesman_phone)">
				<view class="userinfo_item_msg">
					<text class="userinfo_item_msg_top">您的专属客服</text>
					<text class="userinfo_item_msg_bottom">有问题可以及时联系ta的微信</text>
				</view>
				<text class="userinfo_item_text">{{userinfo.salesPersonName}}</text>
			</view>
		</view>
		<view class="submit" @click="editInfo" v-if="!show">
			编辑
		</view>
		<view class="submit" @click="update" v-if="show">
			完成
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"  :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault"
			@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<!-- 上传头像 -->
		<Upload v-if="isUpload" :num='1' @getImgs="getImgsFunc"></Upload>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import Upload from '@/components/upload/upload.vue';

	export default {
		components: {

			mpvueCityPicker,
			Upload
		},
		data() {
			return {
				// nickname:'黄小浩',
				sex: '',
				cityPickerValueDefault: [],
				show: false,
				city: [],
				area: [],
				userinfo: {},
				themeColor: '#888',
				varietyId: '',
				isUpload: false,
				imgParams: {},
				province: [],
			}
		},

		onLoad() {
			this.getRegionData();
			uni.$on('VARIETY', (data) => {
				console.log(data);
				this.userinfo.varirty=data.variety
				this.varietyId=data.id
			})
			uni.$on('MANAGE_AREA',(data)=>{
				this.userinfo.area=data.manageValue
			})
			this.personalInformation()
		},
		methods: {
			// 获取省市区
			getRegionData() {
				let self = this;
				self._post('settings/getRegion', {}, function(res) {
					self.province = res.data[0];
					self.city = res.data[1];
					self.area = res.data[2];
					self.cityPickerValueDefault = [0, 0, 0]
				});
			},
			personalInformation() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user/index/setting', {}, function(res) {
					console.log(res.data,'345653456')
					self.userinfo = res.data;
					if(self.userinfo.gender == 0){
						self.sex = '女'
					}else{
						self.sex = '男'
					}
					uni.hideLoading();
				});
				
			},
			/*获取上传的图片*/
			getImgsFunc(e) {
				let self = this;
				self.isUpload = false;
				if (e && typeof(e) != 'undefined') {
					let self = this;
					let params = {};
					params.userId = self.userinfo.userId;
					params.updateType = "avatarUrl";
					params.updateValue = e[0].filePath;
					self.userinfo.avatarUrl = params.updateValue;
					self.imgParams = params
				}
			},
			/* 修改头像 */
			changeAvatarUrl() {
				if (this.show) {
					let self = this;
					self.isUpload = true;
				}
			},


			// 编辑个人信息
			editInfo() {
				this.show = !this.show
			},
			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
						console.log("成功拨打电话")
					}
				})
			},
			update() {
				let params = {
					userId: this.userinfo.userId,
					mobile: this.userinfo.mobile,
					realName: this.userinfo.realName,
					varirty: this.userinfo.varirty,
					area: this.userinfo.area,
					areaCode:this.userinfo.areaCode,
					acreage:this.userinfo.acreage,
					nickName:this.userinfo.nickName,
					avatarUrl:this.userinfo.avatarUrl,
					gender: this.sex == '女'?'0':'1',
					storeName:this.userinfo.storeName
				}
				let self = this;
				
				uni.showLoading({
					title: '加载中'
				})
				self._postBody('user/user/updateInfo', params, function(res) {
					self.showSuccess('修改成功', function() {
							self.isPopup = false;
							uni.hideLoading();
							self.getData();
						},
						function(err) {
							uni.hideLoading();
							self.isPopup = false;
						}
					)
				});
			},
			// 显示地区picker
			showMulLinkageThreePicker() {
				if (this.show) {
					this.$refs.mpvueCityPicker.show()
				}
			},
			onCancel: function() {
				this.$refs.mpvueCityPicker.hide()
			},
			onConfirm(e) {
				console.log(e, 'ssssssss')
				var city = e.label;
				var data = city.split('-');
				console.log(data[0] + '-------' + data[1] + '------' + data[2])
				this.userinfo.area = data.join(',')
				this.userinfo.areaCode = data.cityCode.join(',')

			},
			verify() {
				if (this.show) {
					uni.navigateTo({
						url: '/userpage/userinfo/varietyvs?showDisable=0&types=' + this.userinfo.varirty
					})
				} else {
					uni.navigateTo({
						url: '/userpage/userinfo/varietyvs?showDisable=1&types=' + this.userinfo.varirty
					})
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F9F9F9;
	}

	.userinfo {
		padding: 0 30rpx;
		background-color: #FFFFFF;

		&_item {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&_left {
				flex: 1;
				// width: 56px;
				// height: 40px;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;

			}

			&_image {
				width: 80rpx;
				height: 80rpx;
				background: #D8D8D8;
				border-radius: 50%;
			}

			&_input {
				text-align: right;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;

			}

			&_msg {
				display: flex;
				flex-direction: column;
				// width: 168rpx;
				// height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;

				&_top {}

				&_bottom {
					margin-top: 20rpx;
				}
			}

			&_text {
				width: 300rpx;
				text-align: right;
				// height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				/* 超出文本隐藏 */
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

			}
		}

		&_border {
			align-items: inherit;
			border: none;
		}
	}

	.submit {
		margin: 30rpx auto 0;
		width: 90%;
		height: 96rpx;
		background: #077840;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;

	}

	.right {
		display: flex;
		align-items: center;
	}

	.img {
		// vertical-align: middle;
		// margin-top: 14rpx;
		margin-left: 20rpx;
	}
</style>